<template>
  <div id="tools">
    <headbar></headbar>
      <div class="mz-content container clearfix">
        <div class="tools-heading">
            <h1>Flyme Design APP</h1>
            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
            <a href="#">查看更多></a>
        </div>
        <div class="menu-content">
            <section class="menu-layout">
                <div class="menu-title">
                    <p>软件工具</p>
                </div>
                <div class="menu-wrapper">
                    <div class="menu-list">
                        <div class="menu-list-img"><img src="../../assets/wallet.png" /></div>
                        <a class="menu-info" href="#" target="_blank">
                            <h4>Flyme Design APP</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                    <div class="menu-list list-right">
                        <div class="menu-list-img"><img src="../../assets/wallet.png" /></div>
                        <a class="menu-info" href="#" target="_blank">
                            <h4>动态编辑器</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                    <div class="menu-list">
                        <div class="menu-list-img"><img src="../../assets/wallet.png" /></div>
                        <a class="menu-info" href="http://drm.meizu.com/" target="_blank">
                            <h4>DRM 素材管理</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                    <div class="menu-list list-right">
                        <div class="menu-list-img"><img src="../../assets/wallet.png" /></div>
                        <a class="menu-info" href="#" target="_blank">
                            <h4>手机助手</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                </div>
            </section>
            <section class="menu-layout">
                <div class="menu-title">
                    <p>数据平台</p>
                </div>
                <div class="menu-wrapper">
                    <div class="menu-list">
                        <div class="menu-list-img"><img src="../../assets/wallet.png" /></div>
                        <a class="menu-info" href="http://wj.flyme.cn/" target="_blank">
                            <h4>Flyme 问卷</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                    <div class="menu-list list-right">
                        <div class="menu-list-img"><img src="../../assets/wallet.png" /></div>
                        <a class="menu-info" href="#" target="_blank">
                            <h4>数据分析平台</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                    <div class="menu-list">
                        <div class="menu-list-img"><img src="../../assets/wallet.png" /></div>
                        <a class="menu-info" href="#" target="_blank">
                            <h4>舆情监控平台</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                    <div class="menu-list list-right">
                        <div class="menu-list-img"><img src="../../assets/wallet.png"/></div>
                        <a class="menu-info" href="#" target="_blank">
                            <h4>用户洞察平台</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                    <div class="menu-list">
                        <div class="menu-list-img"><img src="../../assets/wallet.png" /></div>
                        <a class="menu-info" href="#" target="_blank">
                            <h4>埋点平台</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                    <div class="menu-list list-right">
                        <div class="menu-list-img"><img src="../../assets/wallet.png" /></div>
                        <a class="menu-info" href="#" target="_blank">
                            <h4>广告 SDK</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                </div>
            </section>
            <section class="menu-layout">
                <div class="menu-title">
                    <p>工作平台</p>
                </div>
                <div class="menu-wrapper">
                    <div class="menu-list">
                        <div class="menu-list-img"><img src="../../assets/wallet.png" /></div>
                        <a class="menu-info" href="#" target="_blank">
                            <h4>Nuchlear</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                    <div class="menu-list list-right">
                        <div class="menu-list-img"><img src="../../assets/wallet.png"/></div>
                        <a class="menu-info" href="http://redmine.meizu.com/" target="_blank">
                            <h4>Redmine</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                    <div class="menu-list">
                        <div class="menu-list-img"><img src="../../assets/wallet.png" /></div>
                        <a class="menu-info" href="http://gitlab.meizu.com/" target="_blank">
                            <h4>Gitlab</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                    <div class="menu-list list-right">
                        <div class="menu-list-img"><img src="../../assets/wallet.png"/></div>
                        <a class="menu-info" href="#" target="_blank">
                            <h4>OTA 平台</h4>
                            <p>新系统的公共视觉规范，包含视觉，动画，开发等内容</p>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <footbar></footbar>
  </div>
</template>

<script>
import headbar from '../../components/header.vue'
import footbar from '../../components/footer.vue'

export default {
  name: 'tools',
  components: {
    headbar, footbar,
  }
}
</script>

<style scoped>
/*规范*/


.tools-heading {
    background: #198ded;
    padding: 60px 60px 80px 60px;
}

.tools-heading h1{
  font-family: sc-bold,'Microsoft YaHei';
}

.tools-heading h1, .tools-heading p, .tools-heading a {
    color: #fff;
}

.tools-heading a {
    display: block;
    margin-top: 30px;
}

.menu-content {
    background: #fff;
    padding: 60px;
}

.menu-layout {
    margin-bottom: 60px;
}

.menu-title {
    margin-bottom: 30px;
}

.menu-title p {
  font-family: sc-bold,"Microsoft YaHei";
  font-size: 15px;
  color: #777;
}

.menu-wrapper {

}

.menu-list {
    display: inline-block;
    width: calc((100% - 45px) / 2);
    padding: 0 0 50px 0;
}

.list-right {
    margin-left: 40px;
}

.menu-list-img {
    width: 69px;
    height: 69px;
    float: left;
    margin-right: 10px;
}

.menu-list-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.menu-info {
    display: block;
}

.menu-info h4 {
  font-family: sc-bold,"Microsoft YaHei";
  color: #000;
}

.menu-info p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media screen and (max-width: 768px) {
    .mz-content {
        margin: 0 auto;
        max-width: 100%;
        padding: 0;
        position: relative;
        background: #fff;
    }

    .menu-content {
        background: #fff;
        padding: 20px 18px;
    }

    .menu-list {
        display: inline-block;
        width: calc(100%);
        padding: 0 0 20px 0;
    }

    .list-right {
        margin-left: 0;
    }

    .menu-layout {
        margin-bottom: 30px;
    }

    .menu-list-img {
        width: 49px;
        height: 49px;
    }

    .menu-list-img img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .menu-info h4{
        margin-top: 0;
    }
    .tools-heading {
    padding: 36px 36px 56px 36px;
}

}
</style>
